<template>
  <div id="add-type">
    <div v-if="modelList.length > 1">
      <div class="model-type" v-for="(el, index) in modelList" :key="index">
        <el-input
          v-model.trim="el.input"
          clearable
          @change="getChange"
          :placeholder="el.toptip"
          size="mini"
          :disabled="el.isdisabled"
        >
        </el-input>
        <i v-if="!el.isdisabled" class="iconfont icon-jianshanchu-yuankuang" @click="delModelType(index)"> </i>
      </div>
    </div>
    <div v-else>
      <div class="model-type" v-for="(el, index) in modelList" :key="index">
        <el-input
          :class="{ dsiabled: el.isdisabled }"
          v-model.trim="el.input"
          @change="getChange"
          clearable
          :placeholder="el.toptip"
          size="mini"
          :disabled="el.isdisabled"
        >
        </el-input>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    modellist: {
      type: Array,
      requied: true
    }
  },
  data() {
    return {
      modelList: this.modellist
    }
  },
  mounted() {
    // console.log(this.modellist);
  },
  methods: {
    getChange() {
      this.$emit('input', this.modelList)
    },
    delModelType(index) {
      this.$emit('delType', index)
    }
  }
}
</script>
<style lang="less" scoped>
#add-type {
  width: 100%;
  .icon-jianshanchu-yuankuang {
    font-size: 24px;
    color: #f86951;
    margin-left: 10px;
    cursor: pointer;
  }
  .model-type {
    display: flex;
    align-items: center;
  }
}
</style>
<style lang="less">
.model-type {
  .el-input,
  .el-input__inner {
    width: 280px;
  }
  .dsiabled {
    .el-input__inner {
      border: 1px solid #d6d6d6 !important;
      background-color: #ebebeb !important;
    }
  }
}
</style>
